<template>
    <div>
        <breadcrumb></breadcrumb>
        <div class="titleBox">
            <!-- icon-dingdan -->
            <div class="iconfontcolor icon-jiesuandan"></div>
            <div class="infoBox">
                <div class="info_line1">
                    <h3 class="tit">结算单JS2023040710</h3>
                    <div class="tag" v-if="this.smentStatus == 0">已结算</div>
                    <div class="tag yellow" v-if="this.smentStatus == 1">待结算</div>
                </div>
                <div class="info_line2">
                    <div style="margin-right: 15px">创建时间：2023-05-24 10:15:15</div>
                </div>
            </div>
            <div class="feeGroup" v-if="smentStatus == 1">

                <div class="feeBox">
                    <div class="intervalLine"></div>
                    <div class="feeItem">
                        <div class="tit">结算金额</div>
                        <div class="price" style="color: #1890ff">¥1000.00</div>
                    </div>
                </div>
            </div>

            <button class="examineBtn" v-else-if="smentStatus == 0" @click="isShowDialog()">
                <span>结算</span>
            </button>
        </div>

        <div class="main">
            <el-tabs v-model="activeName" class="mainTabs">
                <el-tab-pane label="结算单信息" name="first">
                    <div class="main_item">
                        <SettlementOrderInfo :data="result" ref="child"></SettlementOrderInfo>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="运单信息" name="second">
                    <div class="main_item">
                        <WaybillInfo :waybillId="waybillId"></WaybillInfo>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
  
<script>
import WaybillInfo from "./subSettlementDocDetails/WaybillInfo.vue";
import SettlementOrderInfo from "./subSettlementDocDetails/SettlementOrderInfo.vue";
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
export default {
    data() {
        return {
            result: {

            },
            smentStatus: '0',
            activeName: "first",
            dialogVisible: false,
            oderState: 0,//假数据 核算状态
            waybillId: "",
        };

    },
    methods: {
        isShowDialog() {
            this.$refs.child.openDialog()
        }




    },
    mounted() {
    },
    components: {
        breadcrumb,
        SettlementOrderInfo,
        WaybillInfo,
    },
};
</script>
  
<style lang="scss" scoped>
.titleBox {
    flex: 1;
    background-color: #fff;
    height: 119px;
    display: flex;
    align-items: center;
    padding: 0 35px;
    margin-bottom: 9px;

    .feeGroup {
        margin-left: auto;
        display: flex;

        .feeBox {
            display: flex;
            width: 180px;
            align-items: center;


            .intervalLine {
                width: 2px;
                height: 64px;
                background-color: #f0f0f0;
                margin-right: 20px;
            }

            .feeItem {
                display: flex;
                flex-direction: column;
                margin-right: 20px;

                .tit {
                    color: #a3a3a3;
                    font-size: 12px;
                    margin-bottom: 14px;
                }

                .price {
                    color: #262626;
                    font-size: 18px;
                    font-weight: Bold;
                }
            }
        }
    }

    .icon-jiesuandan {
        font-size: 43px;
        margin-right: 10px;
    }

    .infoBox {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .info_line1 {
            margin-bottom: 3px;
            display: flex;
            align-items: center;

            >.tit {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                margin-right: 8px;
                color: #262626;
            }

            >.tag {
                background-color: #ecf5fe;
                border-radius: 4px;
                width: 54px;
                height: 20px;
                color: #1890ff;
                font-size: 12px;
                transform: scale(0.833333);
                text-align: center;
                line-height: 20px;

                &.yellow {
                    color: #F8B030;
                    background-color: #FFFCE8;
                }

            }
        }

        .info_line2 {
            display: flex;
            color: #939393;
            font-size: 12px;
        }
    }

    .examineBtn {
        background-color: #1890ff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        color: #ffffff;
        font-size: 12px;
        width: 80px;
        height: 36px;
        cursor: pointer;
        margin-left: auto;

        &:hover {
            opacity: 0.8;
            transition: 0.2s;
        }

        .icon-hetongguanli {
            font-size: 15px;
            margin-right: 6px;
            color: #ffffff;
        }
    }
}

.main {
    background-color: #fff;

    .mainTabs {
        ::v-deep .el-tabs__nav {
            margin-left: 38px;
        }

        // 标签页切换按钮
        ::v-deep .el-tabs__item {
            height: 50px;
            width: 88px;
            text-align: center;
            padding: 0;
            line-height: 50px;
            font-size: 12px;
            font-weight: bold;
            color: #939393;
        }

        // 下边框
        ::v-deep .el-tabs__nav-wrap::after {
            height: 1px;
            background-color: #f0f0f0;
        }

        // 标签页切换按钮 激活样式
        ::v-deep .el-tabs__item.is-active {
            background-color: #ecf5fe;
            color: #1890ff;
        }
    }

    .main_item {
        padding: 31px 30px 36px 30px;

        .descriptionsInfo {
            .picBox {
                width: 80px;
                height: 60px;
                border-radius: 6px;

                .pic {
                    width: 80px;
                    height: 60px;
                }
            }
        }

        .ShippingReceiving_head {
            width: 100%;
            display: flex;
            font-size: 12px;
            margin-bottom: 16px;

            .info_item {
                display: flex;

                .label {
                    margin-right: 22px;
                    color: #939393;
                    height: 16px;
                }

                .value {
                    display: flex;
                    align-items: center;

                    .text {
                        color: #262626;
                        height: 16px;
                    }
                }
            }
        }
    }
}</style>
  